<template>
  <div class="yuehuoyuedu" ref="yuehuoyuedu"></div>
</template>

<script>
export default {
  name: 'YueHuoYueDu',
  props: {
    data: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {};
  },
  watch: {
    // data(val) {
    //   this.initChart();
    // },
    data: {
      handler(nVal, oVal) {
        if (Array.isArray(nVal)) {
          setTimeout(() => {
            this.init();
            this.initChart();
          }, 100)
          // this.$nextTick(() => {
          //   this.init();
          //   this.initChart();
          // })
        }
      },
      immediate: true,
      deep: true,
    }
  },
  created() {

  },
  mounted() {
    // this.initChart();
  },
  methods: {
    init() {
      // prettier-ignore
      let dataAxis = ['历史最高', '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
      let data = new Array(dataAxis.length).fill(0);
      this.option = {
        title: {
          // left: 26,
          // top: 10,
          // subtext: '次',
          show: false,
        },
        grid: {
          top: 75,
          left: 90,
          right: 55,
          bottom: 45,
        },
        xAxis: {
          data: dataAxis,
          axisLabel: {
            inside: false,
            color: '#fff',
            interval: 0,
            alignMinLabel: 'center',
            fontSize: 8,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          z: 10,
        },
        yAxis: {
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: '#86909C',
          },
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: '#86909C',
            },
          },
        },
        series: [
          {
            type: 'bar',
            showBackground: false,
            itemStyle: {
              color: ({ seriesIndex, dataIndex, data, value }) => {
                if (dataIndex === 0) {
                  return new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#FB7224' },
                    { offset: 1, color: 'rgba(22, 93, 255, 0)' },
                  ]);
                }
                return new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#16D5FF' },
                  { offset: 1, color: 'rgba(22, 93, 255, 0)' },
                ]);
              },
              borderRadius: [2, 2, 0, 0],
            },
            // background: linear-gradient(180deg, #16D5FF 0%, rgba(22, 93, 255, 0) 100%);
            emphasis: {
              focus: 'self',
              label: {
                show: true,
                position: 'top',
                color: '#fff',
                fontSize: 12,
              },
            },
            data: data,
            label: {
              show: true,
              position: 'top',
              color: '#fff',
              fontSize: 8,
            },
          },
        ],
      };
    },
    initChart() {
      const box = this.$refs.yuehuoyuedu;
      const chart = this.$echarts.init(box);
      this.chart = chart;

      this.reloadChart();
    },
    reloadChart() {
      const option = this.option;
      if (this.data.length > 0) {
        const xAxisData = this.data.map(item => {
          if (item.date === 0) {
            return '历史最高';
          }
          return `${item.date}月`;
        });
        const seriesData = this.data.map(item => item.recordCount);
        option.xAxis.data = xAxisData;
        option.series[0].data = seriesData;
      }
      const chart = this.chart;
      chart && chart.setOption(option);
    },
  },
};
</script>

<style lang="less" scoped>
.yuehuoyuedu {
  width: 100%;
  height: 100%;
}
</style>
